<template>
    <div class="bg-white p-20px m-20px rounded-12px">
        <div class="mb-8px">
            <div class="text-lg font-bold">会员管理</div>
            <div>
                <filterComponent hideHead v-model:filter-data="filterData" @doSearch="getData" />
            </div>
        </div>
        <tableComponent :table-header="tableHeader" :table-data="tableData" v-model:page-info="pageInfo"
            @pageChange="handlePageChange" @sort-change="onSortChange">
            <template #saleNames>
                <el-table-column prop="saleNames" label="所属商务">
                    <template #default="scope">
                        <div v-if="scope.row.saleNames?.length">
                            {{ scope.row.saleNames.join('，') }}
                        </div>
                        <div v-else>--</div>
                    </template>
                </el-table-column>
            </template>
            <template #status>
                <el-table-column prop="status" label="当前状态">
                    <template #default="scope">
                        <div class="flex items-center">
                            <div v-if="scope.row.status === 0" class="w-6px h-6px rounded-full bg-green mr-4px"></div>
                            <div v-if="scope.row.status === 1" class="w-6px h-6px rounded-full bg-gray mr-4px"></div>
                            <div :class="{ 'text-gray': scope.row.status === 1 }">{{
                                MembershipStatusEnum[scope.row.status]
                                }}</div>
                        </div>
                    </template>
                </el-table-column>
            </template>
            <template #operator>
                <el-table-column prop="operator" label="操作">
                    <template #default="scope">
                        <el-button type="primary" link @click="onShowDetail(scope.row.id)">详情</el-button>
                    </template>
                </el-table-column>
            </template>
        </tableComponent>
        <membershipDetail v-model:show="show" :id="id" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import membershipDetail from './components/membershipDetail.vue'
// import type { FormDataDto } from '@/components/form-component/index.vue'
import { getVipList, getCardList } from '@/api/membership'
import type { VipCompanyDto } from '@/api/membership/type'
import { MembershipStatusEnum } from '@/utils/enum'
import { getFilterDataValue } from '@/utils/utils'
import { getSalesList } from '@/api/baobai'
import type { AnyObject } from '@/api/type'

const filterData = ref({
    list: {
        companyName: {
            label: '会员名称',
            prop: 'companyName',
            value: '',
            placeholder: '请输入',
            type: 'input',
            inputType: 'text'
        },
        vipCardId: {
            label: '会员卡名称',
            prop: 'vipCardId',
            value: '',
            placeholder: '请选择',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'name',
                value: 'id'
            },
            handleFocus: async (item: {
                options: AnyObject[]
            }) => {
                const res = await getCardList()
                item.options = res
            }
        },
        status: {
            label: '会员状态',
            prop: 'status',
            value: '',
            placeholder: '',
            type: 'select',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '已激活',
                    value: 0
                },
                {
                    label: '已过期',
                    value: 1
                }
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            }
        },
        openTime: {
            label: '开通时间',
            prop: 'openTime',
            value: '',
            type: 'date',
            dateType: 'date',
        },
        saleId: {
            label: '所属商务',
            prop: 'saleId',
            value: '',
            placeholder: '',
            type: 'select',
            options: [],
            filterable: true,
            defaultAttrs: {
                label: 'salesName',
                value: 'id'
            },
            handleFocus: async (item: {
                options: AnyObject[]
            }) => {
                const res = await getSalesList({})
                item.options = res
            },
        }
    }
})

const tableHeader = ref([
    {
        label: '会员名称',
        prop: 'companyName',
    },
    {
        label: '会员卡名称',
        prop: 'vipCardName',
    },
    {
        label: '超管',
        prop: 'adminName',
    },
    {
        label: '联系方式',
        prop: 'phone',
    },
    {
        label: '所属商务',
        prop: 'saleNames',
    },
    {
        label: '开通时间',
        prop: 'openTime',
        width: 170,
        sortable: 'customer'

    },
    {
        label: '到期时间',
        prop: 'dueTime',
        width: 170,
        sortable: 'customer'
    },
    {
        label: '当前状态',
        prop: 'status',
    },
    {
        label: '操作',
        prop: 'operator',
    }
])
const tableData = ref<VipCompanyDto[]>([] as VipCompanyDto[])

const pageInfo = ref({
    pageSize: 10,
    pageNum: 1,
    total: 0
})

const sort = ref({
    prop: '',
    order: ''
})

const show = ref(false)
const id = ref()

/**
 * @description 获取列表
 *
 * @returns 无返回值
 */
const getData = async () => {
    const query = getFilterDataValue(filterData.value)
    console.log(111, query)
    const res = await getVipList({
        ...query,
        sortField: sort.value.prop,
        sortOrder: sort.value.order,
        pageSize: pageInfo.value.pageSize,
        pageNum: pageInfo.value.pageNum,
    })
    tableData.value = res.list
    pageInfo.value.total = res.totalCount as number
}

const onSortChange = (sortData: {
    order: string,
    prop: string
}) => {
    const map = {
        ascending: 'ASC',
        descending: 'DESC'
    }
    sort.value.order = map[sortData.order as keyof typeof map]
    sort.value.prop = sortData.order ? sortData.prop : ''
    getData()
}


/**
 * @description 显示详情
 *
 * @param detailId 详情ID
 * @returns 无返回值
 */
const onShowDetail = (detailId: number) => {
    id.value = detailId
    show.value = true
}

const handlePageChange = () => {

}

onMounted(() => {
    getData()
})

</script>
<style lang="scss" scoped></style>
